<clr-modal [(clrModalOpen)]="opened" [clrModalClosable]="false">
    <h3 class="modal-title">{{'APP_CLUSTER_UPGRADE'|translate}}</h3>
    <div class="modal-body modal-height">
        <form clrForm #clusterForm="ngForm">
            <clr-select-container>
                <label>{{'APP_VERSION'|translate}}</label>
                <select clrSelect name="version" [(ngModel)]="chooseVersion" (change)="onSelectChooseVersion()"
                        required>
                    <option *ngFor="let re of upgradeVersions" [value]="re">{{re}}</option>
                </select>
                <clr-control-helper *ngIf="upgradeVersions.length === 0">{{'APP_CLUSTER_UPGRADE_HELPER'|translate}}</clr-control-helper>
            </clr-select-container>
        </form>
        <div *ngIf="newManifest&&oldManifest">
            <hr>
            <table class="table">
                <thead>
                <tr>
                    <th>{{"APP_NAME"|translate}}</th>
                    <th>{{"APP_CURRENT_VERSION"|translate}}</th>
                    <th>{{"APP_UPGRADE_VERSION"|translate}}</th>
                </tr>
                </thead>
                <tbody>
                <tr *ngIf="getVersion('kubernetes', oldManifest.coreVars)!==getVersion('kubernetes', newManifest.coreVars)">
                    <td>Kubernetes</td>
                    <td>{{getVersion("kubernetes", oldManifest.coreVars)}}</td>
                    <td>{{getVersion("kubernetes", newManifest.coreVars)}}</td>
                <tr *ngIf="getVersion('etcd', oldManifest.coreVars)!==getVersion('etcd', newManifest.coreVars)">
                    <td>ETCD</td>
                    <td>{{getVersion("etcd", oldManifest.coreVars)}}</td>
                    <td>{{getVersion("etcd", newManifest.coreVars)}}</td>
                </tr>
                <tr *ngIf="currentCluster.spec.runtimeType=='docker'&& getVersion('docker', oldManifest.coreVars)!==getVersion('docker', newManifest.coreVars)">
                    <td>Docker</td>
                    <td>{{getVersion("docker", oldManifest.coreVars)}}</td>
                    <td>{{getVersion("docker", newManifest.coreVars)}}</td>
                </tr>
                <tr *ngIf="currentCluster.spec.runtimeType=='containerd'&& getVersion('containerd', oldManifest.coreVars)!==getVersion('containerd', newManifest.coreVars)">
                    <td>Containerd</td>
                    <td>{{getVersion("containerd", oldManifest.coreVars)}}</td>
                    <td>{{getVersion("containerd", newManifest.coreVars)}}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline" (click)="onCancel()"
                [disabled]="isSubmitGoing">{{'APP_CANCEL'|translate}}</button>
        <button type="submit" class="btn btn-primary" (click)="onSubmit()"
                [disabled]="clusterForm.invalid">{{'APP_COMMIT'|translate}}</button>
    </div>
</clr-modal>